<template>
  <div class="chart-wrapper">
    <el-card>
      <template #header>
        <div style="font-size: 16px;">最近30天交易统计图(万元)</div>
      </template>
      <div v-loading="loading" style="height: 340px;" ref="chartDom"></div>
    </el-card>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { useHomePageInfo } from './useHomePageInfo'


const { data } = useHomePageInfo({})

const loading = ref(false)

const chartDom = ref(null)

const xAxisData = ref<string[]>([])

const option = reactive({
      grid: {
              left: '3%',  // 左边距
              right: '3%', // 右边距
              top: '8%',   // 上边距
              bottom: '8%' // 下边距
              // 也可以设置为具体的像素值，如 left: 40
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData.value
      },
      tooltip: {
            trigger: 'axis', // 触发类型，这里设置为坐标轴触发
            formatter: function(params) {

      // params 是包含当前点所有信息的对象或对象数组，当 trigger 为 'axis' 时是对象数组
      let res = params[0].name; // 获取 X 轴的标签作为提示内容的标题
      for (let i = 0; i < params.length; i++) {
        res += '<br/>' + params[i].marker + '金额（万元）' + ' : ' + params[i].value;
        // params[i].seriesName 是该点所属的系列的名字
        // params[i].value 是该点的 Y 轴数据值
      }
      return res;
    },
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line', // 默认为直线，可选为：'shadow' | 'cross'
                lineStyle: { // 直线指示器样式设置
                    color: 'rgba(0,0,0,0.2)',
                    width: 1,
                    type: 'dashed'
                },
                crossStyle: {
                    color: 'red',
                    width: 1,
                    type: 'dashed'
                },
                shadowStyle: {
                    color: 'rgba(0,0,0,0.8)'
                }
            }
        },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line',
          symbol: 'none',
          areaStyle: {
            color: '#c4d8fc'
          },
          lineStyle: {
            color: '#428cf7',
            width: 0.8
          }
        }
      ]
})

const renderChart = () => {
  var myChart = echarts.init(chartDom.value);
  myChart.setOption(option);

  window.addEventListener('resize', function() {
    myChart.resize();
  });
}

watchEffect(() => {
    option.xAxis.data = data.value?.days || []
    option.series[0].data = data.value?.costs || []
    loading.value = false
    setTimeout(() => {
      renderChart()
    }, 1000);
})
</script>

<style scoped lang="scss">
.operator-home {
    .chart-wrapper {
        margin-top: 10px;
    }
}
</style>
